<template>
  <el-container class="cc-container">
    <el-aside class="cc-container-aside">
      <div class="menu-header-left">
        <img src="@/assets/image/logo.png" alt="" />
        <!-- <span>客户协同系统</span> -->
      </div>
      <el-aside style="background-color: #ffffff" class="cc-container-aside-ul">

        <el-menu :default-active="defaultActive" :collapse="isCollapse">
          <div v-for="item in asideList" :key="item.id">
            <!-- 一级菜单无子节点 -->
            <template v-if="item.children && item.children.length == 0">
              <el-menu-item :index="item.path" @click="handleSelect(item)">
                <i :class="item.icon" v-if="item.icon"></i>
                {{ item.name }}
              </el-menu-item>
            </template>

            <!-- 一级菜有子节点 -->
            <template v-else>
              <el-submenu :index="item.path">
                <template slot="title">
                  <i :class="item.icon" v-if="item.icon"></i>
                  {{ item.name }}
                </template>

                <div v-for="item_ in item.children" :key="item_.id">
                  <!-- 二级菜单无节点 -->
                  <template v-if="item_.children && item_.children.length == 0">
                    <el-menu-item
                      :index="item_.path"
                      @click="handleSelect(item_)"
                    >
                      <i :class="item.icon" v-if="item_.icon"></i>
                      {{ item_.name }}
                    </el-menu-item>
                  </template>

                  <!-- 二级菜单有子节点 -->
                  <template v-else>
                    <el-submenu :index="item_.path">
                      <template slot="title">
                        <i :class="item.icon" v-if="item_.icon"></i>
                        {{ item_.name }}
                      </template>

                      <div v-for="item__ in item_.children" :key="item__.id">
                        <!-- 三级菜单无子节点 -->
                        <template
                          v-if="item__.children && item__.children.length == 0"
                        >
                          <el-menu-item
                            :index="item__.path"
                            @click="handleSelect(item__)"
                          >
                            <i :class="item.icon" v-if="item__.icon"></i>
                            {{ item__.name }}
                          </el-menu-item>
                        </template>

                        <!-- 三级菜单有子节点 -->
                        <template v-else>
                          <el-submenu :index="item__.path">
                            <template slot="title">
                              <i :class="item.icon" v-if="item_.icon"></i>
                              {{ item_.name }}
                            </template>

                            <div
                              v-for="item___ in item_.children"
                              :key="item___.id"
                            >
                              <!-- 四级菜单 -->
                            </div>
                          </el-submenu>
                        </template>
                      </div>
                    </el-submenu>
                  </template>
                </div>
              </el-submenu>
            </template>
          </div>
        </el-menu>
      </el-aside>
    </el-aside>

    <div class="cc-container-main">
      <elsHeader></elsHeader>
      <TagsView />
      <el-main>
        <router-view></router-view>
      </el-main>
    </div>
  </el-container>
</template>
<script>
import elsHeader from "@/components/business-components/elHeader.vue";
import { default as TagsView } from "@/components/TagsView/index.vue";

export default {
  data() {
    return {
      isCollapse: false,
      defaultActive: "",
      asideList: [
        {
          id: "VMenu00070",
          fatherID: "VMenu00006",
          type: 3,
          name: "首页",
          icon: "iconfont icon-shouye_4",
          path: "/home/index",
          component: null,
          orderIndex: 1,
          children: [],
          hidden: false,
          summary: null,
          systemID: null,
          approveCountApi: null,
        },
        {
          id: "M00223",
          fatherID: "VMenu00006",
          type: 3,
          name: "订单管理",
          icon: "iconfont icon-dingdan",
          path: "/home",
          component: null,
          orderIndex: 5,
          children: [
            {
              id: "M00224",
              fatherID: "M00223",
              type: 4,
              name: "我的订单",
              icon: "",
              path: "/home/homeDemo",
              component: null,
              orderIndex: 1,
              children: [],
              hidden: false,
              summary: null,
              systemID: null,
              approveCountApi: null,
            },
          ],
          hidden: false,
          summary: null,
          systemID: null,
          approveCountApi: null,
        },
        {
          id: "M00223233",
          fatherID: "VMenu00006",
          type: 4,
          name: "询价管理",
          icon: "iconfont icon-inquiry",
          path: "/home/publishEnquiry",
          component: null,
          orderIndex: 7,
          children: [
            {
              id: "M00224333",
              fatherID: "M00223233",
              type: 4,
              name: "发布询价",
              icon: "",
              path: "/home/publishEnquiry",
              component: null,
              orderIndex: 8,
              children: [],
              hidden: false,
              summary: null,
              systemID: null,
              approveCountApi: null,
            },
            {
              id: "M00224334",
              fatherID: "M00223233",
              type: 4,
              name: "我收到的报价",
              icon: "",
              path: "/home/receiveQuotedPrice",
              component: null,
              orderIndex: 9,
              children: [],
              hidden: false,
              summary: null,
              systemID: null,
              approveCountApi: null,
            },
            {
              id: "M00224335",
              fatherID: "M00223233",
              type: 4,
              name: "我的议价",
              icon: "",
              path: "/home/myDicker",
              component: null,
              orderIndex: 10,
              children: [],
              hidden: false,
              summary: null,
              systemID: null,
              approveCountApi: null,
            },
            {
              id: "M00224336",
              fatherID: "M00223233",
              type: 4,
              name: "有效报价单",
              icon: "",
              path: "/home/validPrice",
              component: null,
              orderIndex: 11,
              children: [],
              hidden: false,
              summary: null,
              systemID: null,
              approveCountApi: null,
            },
          ],
          hidden: false,
          summary: null,
          systemID: null,
          approveCountApi: null,
        },
        {
          id: "M00120",
          fatherID: "VMenu00006",
          type: 5,
          name: "库存查询",
          icon: "iconfont icon-kucunchaxun",
          path: "/home/stock",
          component: null,
          orderIndex: 5,
          children: [
            {
              id: "M00102",
              fatherID: "M00120",
              type: 6,
              name: "库存查询",
              icon: "",
              path: "/home/inventory",
              component: null,
              orderIndex: 2,
              children: [],
              hidden: false,
              summary: null,
              systemID: null,
              approveCountApi: null,
            },
          ],
          hidden: false,
          summary: null,
          systemID: null,
          approveCountApi: null,
        },
        {
          id: "M00225",
          fatherID: "VMenu00006",
          type: 3,
          name: "收货管理",
          icon: "iconfont icon-icon-receive",
          path: "/home/tran",
          component: null,
          orderIndex: 6,
          hidden: false,
          summary: null,
          systemID: null,
          approveCountApi: null,
          children: [
            {
              id: "M00226",
              fatherID: "M00225",
              type: 4,
              name: "在途货物",
              icon: "",
              path: "/home/transitGoods",
              component: null,
              orderIndex: 1,
              children: [],
              hidden: false,
              summary: null,
              systemID: null,
              approveCountApi: null,
            },
            {
              id: "M00229",
              fatherID: "M00225",
              type: 4,
              name: "我的收货单",
              icon: "",
              path: "/home/myReceipt",
              component: null,
              orderIndex: 1,
              children: [],
              hidden: false,
              summary: null,
              systemID: null,
              approveCountApi: null,
            },
          ],
        },
        {
          id: "M00230",
          fatherID: "VMenu00006",
          type: 3,
          name: "售后管理",
          icon: "iconfont icon-wuyoushouhou",
          path: "/home/aftersales",
          component: null,
          orderIndex: 5,
          children: [
            {
              id: "M00231",
              fatherID: "M00230",
              type: 4,
              name: "退换补货管理",
              icon: "",
              path: "/home/replacement",
              component: null,
              orderIndex: 1,
              children: [],
              hidden: false,
              summary: null,
              systemID: null,
              approveCountApi: null,
            },
          ],
          hidden: false,
          summary: null,
          systemID: null,
          approveCountApi: null,
        },
        {
          id: "VMenu000700",
          fatherID: "VMenu00006",
          type: 3,
          name: "增值服务",
          icon: "iconfont icon-erji-zengzhifuwu",
          path: "/home/addService",
          component: null,
          orderIndex: 1111,
          children: [],
          hidden: false,
          summary: null,
          systemID: null,
          approveCountApi: null,
        },
        {
          id: "VMenu000701",
          fatherID: "VMenu00006",
          type: 3,
          name: "财务管理",
          icon: "iconfont icon-caiwuguanli",
          path: "/home/moneyManger",
          component: null,
          orderIndex: 1112,
          children: [],
          hidden: false,
          summary: null,
          systemID: null,
          approveCountApi: null,
        },
        {
          id: "M00226",
          fatherID: "VMenu00006",
          type: 3,
          name: "系统管理",
          icon: "iconfont icon-xitong",
          path: "/home/manageRole",
          component: null,
          orderIndex: 6,
          hidden: false,
          summary: null,
          systemID: null,
          approveCountApi: null,
          children: [
            {
              id: "M00227",
              fatherID: "M00226",
              type: 4,
              name: "基本信息",
              icon: "",
              path: "/home/information",
              component: null,
              orderIndex: 1,
              children: [],
              hidden: false,
              summary: null,
              systemID: null,
              approveCountApi: null,
            },
            {
              id: "M002275",
              fatherID: "M00226",
              type: 4,
              name: "地址管理",
              icon: "",
              path: "/home/addressManagement",
              component: null,
              orderIndex: 1,
              children: [],
              hidden: false,
              summary: null,
              systemID: null,
              approveCountApi: null,
            },
            {
              id: "M0022722",
              fatherID: "M00226",
              type: 4,
              name: "账号管理",
              icon: "",
              path: "/home/accountMaMnagement",
              component: null,
              orderIndex: 1,
              children: [],
              hidden: false,
              summary: null,
              systemID: null,
              approveCountApi: null,
            },
            {
              id: "M002274",
              fatherID: "M00226",
              type: 4,
              name: "我的公司管理",
              icon: "",
              path: "/home/meCompanyManagement",
              component: null,
              orderIndex: 1,
              children: [],
              hidden: false,
              summary: null,
              systemID: null,
              approveCountApi: null,
            },
            {
              id: "M002273",
              fatherID: "M00226",
              type: 4,
              name: "角色管理",
              icon: "",
              path: "/home/roleManagement",
              component: null,
              orderIndex: 1,
              children: [],
              hidden: false,
              summary: null,
              systemID: null,
              approveCountApi: null,
            },
            {
              id: "M002271",
              fatherID: "M00226",
              type: 4,
              name: "账号安全",
              icon: "",
              path: "/home/accountSecurity",
              component: null,
              orderIndex: 1,
              children: [],
              hidden: false,
              summary: null,
              systemID: null,
              approveCountApi: null,
            },
            {
              id: "M00227233",
              fatherID: "M00226",
              type: 4,
              name: "账号绑定",
              icon: "",
              path: "/home/accountMaMnagement",
              component: null,
              orderIndex: 1,
              children: [],
              hidden: false,
              summary: null,
              systemID: null,
              approveCountApi: null,
            },
            {
              id: "M002277",
              fatherID: "M00226",
              type: 4,
              name: "系统公告",
              icon: "",
              path: "/home/systemAnnouncement",
              component: null,
              orderIndex: 1,
              children: [],
              hidden: false,
              summary: null,
              systemID: null,
              approveCountApi: null,
            },
            {
              id: "M002279",
              fatherID: "M00226",
              type: 4,
              name: "消息提醒",
              icon: "",
              path: "/home/messagePrompt",
              component: null,
              orderIndex: 1,
              children: [],
              hidden: false,
              summary: null,
              systemID: null,
              approveCountApi: null,
            },
          ],
        },
      ],
    };
  },
  watch: {
    $route(to, from) {
      this.defaultActive = to.path;
    },
  },
  computed: {},
  components: {
    elsHeader,
    TagsView,
  },
  methods: {
    handleSelect(item) {
      if (item.path) {
        this.defaultActive = item.path;
        sessionStorage.setItem("defaultActive", item.path);
        this.$router.push(item.path);
      }
    },
  },
  created() {
    if (sessionStorage.getItem("defaultActive")) {
      this.defaultActive = sessionStorage.getItem("defaultActive");
    }
  },
};
</script>
<style lang="scss">
.cc-container {
  .el-menu {
    padding: 0 24px;
    border-right: none;
  }
  .el-menu-item.is-active {
    font-size: 14px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #ffffff;
    background: #004fee;
    border-radius: 4px;
  }
  .el-submenu__title {
    font-size: 14px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #616881;
    i {
      margin-right: 10px;
      font-size: 20px;
    }
  }

  .el-menu-item {
    font-size: 14px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #616881;
    i {
      margin-right: 10px;
      font-size: 20px;
    }
  }
}
</style>
<style scoped lang="scss">
.cc-container {
  width: 100%;
  height: 100%;
  overflow: hidden;

  &-aside {
    width: 200px;
    overflow: hidden;
    &-ul {
      padding-top: 20px;
      border-right: solid 1px #e6e6e6;
      width: 100%;
      height: calc(100% - 53px);
      overflow-x: hidden; /*x轴禁止滚动*/
      overflow-y: scroll; /*y轴滚动*/
    }
  }
  &-main {
    width: calc(100% - 269px);
    display: flex;
    flex-direction: column;
  }
}
.cc-container-aside-ul::-webkit-scrollbar {
  display: none; /*隐藏滚动条*/
}
::deep .el-main {
  padding: 0 !important;
}

.menu-header-left {
  height: 53px;
  background: #ffffff;
  border-bottom: 1px solid #eeeeee;
  display: flex;
  align-items: center;

  img {
    width: 132px;
    height: 29px;
    margin-left: 24px;
  }
  span {
    font-size: 16px;
    font-weight: 700;
    color: #000000;
  }
  // border: 1px solid #eeeeee;
}
</style>
